<template>
	<view class="bf">
		<!--头部 -->
		<u-navbar :is-back="false" :border-bottom="false">
			<view class="u-flex u-m-l-20 u-m-r-20 bf-search-navbar">
				<view class="u-font-xl u-m-r-20">分类</view>
				<view class="bf-notice-search-bar">
					<u-icon name="search" class="bf-notice-search-bar-left-icon"></u-icon>
					<u-notice-bar type="none" mode="vertical" :is-circular="false" :list="list" :border-radius="30"
						:volume-icon="false" :more-icon="false" class="bf-notice-search-bar-u-notice-bar">
					</u-notice-bar>
				</view>
			</view>
		</u-navbar>
		<!-- 包裹器 -->
		<view class="bf-menu-wrap">
			<!-- 左侧 -->
			<scroll-view scroll-y class="bf-tab-view menu-scroll-view"  scroll-with-animation :scroll-top="scrollTop">
				<view v-for="i,index in categories" :key="i.id" class="bf-tab-item" :data-current="index"
					@tap.stop="switchCategory(i.id,index)" :class="[current===index?'bf-tab-item-active':'']">
					<text class="u-line-1">{{i.name}}</text>
				</view>
			</scroll-view>
			<!-- 右侧 -->
			<scroll-view scroll-y class="bf-right-box"@scrolltolower="loadMore">
				<view v-for="item in searchResult.content" :key="item.id" @tap="toProductDetail(item.id)">
					<view class="u-m-b-10 u-m-l-20 u-m-r-20 u-flex bf-product-item">
						<ListImgItem :src="item.imgUrl"
						 :showLeft="item.skuType===1"
						:showRight="false"
						:showBottom="item.isNewPerson===1"
						 width="200rpx" height="200rpx"></ListImgItem>
						<!-- 文字 -->
						<view class="bf-product-item-msg u-border-bottom u-p-b-20 u-m-l-20">
							<view>
								<view class="u-font-lg">{{item.title}}</view>
								<view class="u-type-info u-font-sm">已售 {{item.sale}} /剩余 {{item.stock}}</view>
								<view class="u-font-xs u-type-error-dark" v-for="rule,index in item.ruleList"
									:key="index">{{rule}}</view>
							</view>
							<view class="u-flex u-row-between">
								<view class="u-type-error bf-product-item-msg-price-container">
									<text>￥</text>
									<text class="bf-product-item-msg-price-container-value">{{item.price}}</text>
								</view>
								<AddToCart :cartDetail="item"></AddToCart>
							</view>
						</view>
					</view>
					<u-gap height="20"></u-gap>
					
				</view>
				<!-- 用户体验的提升 -->
				<u-divider v-if="!(searchResult.first&&searchResult.empty)&&searchResult.last" :height="60"bg-color="transparent">我是有底线的</u-divider>
				<u-empty  mode="list" v-if="searchResult.first && searchResult.empty"></u-empty>
			</scroll-view>

			
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from "vuex"
	export default {
		data() {
			return {
				list: ['最见搜索关键字', '暂时未处理搜索页', '可以考虑最见关键字'],
				current: 0, //当前菜单index
				scrollTop: 0, //滚动条的高度
				categoryId: 0, //当前选中的id
				menuHeight: 0, //左侧菜单高度
				menuItemHeight: 0, //左侧按钮高度
				filter: {
					page: 1,
					limit: 5,
					keyword: "",
					wareId: ""
				},
				searchResult: {
					content: [],
					last: false
				}
			};
		},
		computed: {
			...mapState("categoryModule", ["categories"])
		},
		methods: {
			// 获取分类列表
			...mapActions("categoryModule", ["getCategoriesAction"]),
			//获取不带活动的商品列表
			 ...mapActions('cartModule', ['getCartListAction']),
			//点击切换菜单
			async switchCategory(categoryId, index) {
				// 重置之前的状态
				Object.assign(this.$data.searchResult, this.$options.data().searchResult);
				Object.assign(this.$data.filter, this.$options.data().filter);
				//@tap事件是微信小程序的点击事件
				//不使用scroll-into-view是因为该种滚动不会定位到中间
				this.categoryId = categoryId;
				if (index === this.current) return;
				this.current = index;
				//初始化
				if (this.menuHeight == 0 || this.menuItemHeight == 0) {
					//获取对应的菜单整体和单个菜单项计算高度
					await this.getElRect("menu-scroll-view", "menuHeight");
					await this.getElRect("bf-tab-item", "menuItemHeight");
				}
				//将活动菜单垂直居中 scroll-top事件是移动到指定竖向位置
				//将要移动的距离=当前菜单的总高度-菜单整体高度/2+单个菜单/2
				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2
				//获取右侧商品的数据
				this.getCategoryProductList()
			},
			//计算高度 赋予dom功能
			getElRect(elClass, dataVal) {
				new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query.select("." + elClass).fields({
						size: true
					}, (res) => {
						//如果节点尚未生成，res值为null，循环调用执行
						if (!res) {
							setTimeout(() => {
								this.getElRect(elClass)
							}, 10)
							return
						}
						this[dataVal] = res.height
					}).exec()
				})
			},
			//获取分类对应的商品列表
			async getCategoryProductList() {
				const o = {
					categoryId: this.categoryId,
					...this.filter
				}
				let res = await this.$u.api.getSearchSku(o)
				this.searchResult = {
					...res,
					content: [...this.searchResult.content, ...res.content]
				}
			},
			//上拉加载更多
			loadMore() {
				if (!this.searchResult.last) {
					// 注意这里的加载数量问题 可以通过请求查看
					this.filter.page +=1;
					this.getCategoryProductList()
				}
			},
			//跳转到商品详情页
			toProductDetail(skuId){
				this.$u.route("/pages/productDetail/productDetail",{
					skuId
				})
			}

		},
		async mounted() {
			await this.getCategoriesAction() //获取分类列表
			this.categoryId = this.categories[0].id //获取第一个分类的id
			await this.getCategoryProductList()
			// 获取最新的购物车数据
			this.getCartListAction()
		}

	}
</script>

<style lang="scss" scoped>
	.bf {
	  height: calc(100vh);
	  display: flex;
	  flex-direction: column;
	
	  &-search-navbar {
	    margin-top: -20rpx;
	    width: 100%;
	  }
	  /* 滚动信息搜索框 */
	  &-notice-search-bar {
	    flex: 1;
	    display: flex;
	    align-items: center;
	    background-color: #ededed;
	    border-radius: 30rpx;
	
	    /* 滚动信息搜索框左侧图标 */
	    &-left-icon {
	      position: relative;
	      left: 20rpx;
	      color: $u-light-color;
	    }
	
	    /* 滚动信息搜索框中的字体设置 */
	    &-u-notice-bar {
	      flex: 1;
	      /* 深层穿透修改子组件字体颜色样式 */
	      ::v-deep .u-news-item {
	        color: $u-light-color !important;
	      }
	    }
	  }
	
	  /* 菜单包装器 */
	  &-menu-wrap {
	    flex: 1;
	    display: flex;
	    overflow: hidden;
	  }
	
	  /* 左侧sv选项卡模式菜单 */
	  &-tab-view {
	    width: 200rpx;
	    height: 100%;
	  }
	
	  /* 左侧菜单选项卡项 */
	  &-tab-item {
	    height: 110rpx;
	    background: #f6f6f6;
	    box-sizing: border-box;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    font-size: 26rpx;
	    color: #444;
	    font-weight: 400;
	    line-height: 1;
	
	    /* 激活状态 */
	    &-active {
	      position: relative;
	      color: $u-type-warning;
	      font-size: 30rpx;
	      font-weight: 600;
	      background: #fff;
	      /* 伪类处理 */
	      &::before {
	        content: '';
	        position: absolute;
	        border-left: 4px solid $u-type-warning;
	        height: 32rpx;
	        left: 0;
	        top: 39rpx;
	      }
	    }
	  }
	
	  /* 产品列表项 */
	  &-product-item {
	    height: 210rpx;
	
	    &-msg {
	      height: 100%;
	      flex: 1;
	      display: flex;
	      flex-direction: column;
	      justify-content: space-between;
	
	      &-price-container {
	        &-value {
	          font-size: 40rpx;
	        }
	      }
	    }
	  }
	
	  &-right-box {
	    // background-color: rgb(250, 250, 250);
		background-color: rgb(240, 240, 240)
	  }
	}
</style>
